import React, { useEffect, useState, useRef } from "react";
import * as echarts from 'echarts';
import * as $ from 'jquery';

interface MapChartProps {
    mapName: string;
    mapURL: string;
    option: {};
    width: number;
    height: number;
}

export default function MapChart(props: MapChartProps) {

    const mapRef = useRef();
    const [width, setWidth] = useState(props.width);
    const [height, setHeight] = useState(props.height);

    useEffect(() => {
        setWidth(props.width);
        setHeight(props.height);
        const myChart = echarts.init(mapRef.current);
        myChart.showLoading();
        $.get(props.mapURL, function(geoJson) {
            echarts.registerMap(props.mapName, geoJson);
            myChart.hideLoading();
            myChart.setOption(props.option);
        });

    }, [props.mapName, props.mapURL, props.option, props.width, props.height]);

    return (
        <div ref={mapRef} style={{ width: width, height: height }}/>
    );
}

